<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../common/swiper.min.css">
    <link rel="stylesheet" href="../../common/base.css">
    <link rel="stylesheet" href="../../common/common.css">
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
    <div class="content">
        <div class="content-top">
            <h1>任我赚</h1>
            <p>平台功能有<span>N</span>个任务，全部完成可获得<span>N</span>元收益</p>
            <div class="banner">
                <ul>
                    <li>
                        <img src="../../img/banner.png">
                    </li>
                </ul>
            </div>
        </div>
        <div class="notice clearfix">
            <i class="fl notice-image">
                <img src="../../img/icon-gonggao.png" alt="">
            </i>
            <ul class="fl notice-list">
                <li>游戏币发货延迟的公告</li>
                <li>二十万现金补贴，“畅玩元旦”大...</li>
            </ul>
            <div class="fr notice-btn">
                <span>查看</span>
                <span>更多</span>
            </div>
        </div>
        <div class="groom-task">
            <div class="groom-task-top clearfix">
                <h2 class="fl">推荐任务</h2>
                <span class="fr">查看更多</span>
            </div>


            <div class="swiper-container">
                <ul class="groom-task-list swiper-wrapper">
                    <li class="swiper-slide">
                        <div class="groom-task-list-top">
                            <img src="../../img/groom-task.png">
                            <div class="groom-task-hint">
                                <span>其他任务</span><br/>
                                <span>浦发信用卡申请</span>
                            </div>
                        </div>
                        <ul class="groom-task-list-bottom">
                            <li>剩余: 54人</li>
                            <li class="clearfix">
                                <img src="../../img/icon-time.png" class="fl">
                                <span class="fl">2018-03-31 18:00</span>
                            </li>
                            <li>¥7.00</li>
                        </ul>
                    </li>
                    <li class="swiper-slide">
                        <div class="groom-task-list-top">
                            <img src="../../img/groom-task.png">
                            <div class="groom-task-hint">
                                <span>其他任务</span><br/>
                                <span>浦发信用卡申请</span>
                            </div>
                        </div>
                        <ul class="groom-task-list-bottom">
                            <li>剩余: 54人</li>
                            <li class="clearfix">
                                <img src="../../img/icon-time.png" class="fl">
                                <span class="fl">2018-03-31 18:00</span>
                            </li>
                            <li>¥7.00</li>
                        </ul>
                    </li>
                    <li class="swiper-slide">
                        <div class="groom-task-list-top">
                            <img src="../../img/groom-task.png">
                            <div class="groom-task-hint">
                                <span>其他任务</span><br/>
                                <span>浦发信用卡申请</span>
                            </div>
                        </div>
                        <ul class="groom-task-list-bottom">
                            <li>剩余: 54人</li>
                            <li class="clearfix">
                                <img src="../../img/icon-time.png" class="fl">
                                <span class="fl">2018-03-31 18:00</span>
                            </li>
                            <li>¥7.00</li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
        <div class="total-task">
            <div class="total-task-top clearfix">
                <h2 class="fl">全部任务</h2>
                <span class="fr">查看更多</span>
            </div>
            <div class="total-task-content">
                <ul class="total-task-title">
                    <li>全部<i>▼</i></li>
                    <li>年龄<i>▼</i></li>
                    <li>区域<i>▼</i></li>
                    <li>最高薪资<i>▼</i></li>
                </ul>
            </div>

        </div>
    </div>
</body>
<script type="text/javascript" src="../../lib/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../../lib/swiper.min.js"></script>
<script type="text/javascript" src="../../lib/vue.js"></script>
<script type="text/javascript" src="../../lib/layer/layer.js"></script>
<script>
    $(function () {
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            loop: false,
        })
    })

</script>
</html>